import React, { Component, createRef } from "react";
import { connect } from "react-redux";
import { _getGroupList, _addGroupList } from "@/store/actions/cart";
import { Modal, Button, message } from "antd";
import AddFrom from "./add";
import style from "./index.module.css";
import Header from "@/components/layout/header";

const mapState2props = function (store) {
  return store.cart;
};
const mapDispatch2props = function (dispatch) {
  return {
    getGroupList: () => dispatch(_getGroupList()),
    addGroupList: (title) => dispatch(_addGroupList(title)),
  };
};
@connect(mapState2props, mapDispatch2props)
class Cart extends Component {
  state = { visible: false, title: "", inpVal: "" };
  formRef = createRef();

  componentDidMount() {
    this.props.getGroupList();
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  };
  async handleOk() {
    const fieldsValue = this.formRef.current.getFieldsValue();
    const result = await this.props.addGroupList(fieldsValue.title);
    if (result.data.code) {
      message.success(result.data.msg, () => {
        this.props.getGroupList();
        this.setState({
          visible: false,
        });
      });
    }
  }
  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  changeHandler(e) {
    this.setState({
      inpVal: e.target.value,
    });
  }
  clickHandler() {
    this.setState({
      title: this.state.inpVal,
    });
  }
  render() {
    const { groupList } = this.props;
    return (
      <div>
        <input
          value={this.state.inpVal}
          onChange={(e) => this.changeHandler(e)}
        />
        <button onClick={() => this.clickHandler()}>点我</button>
        <Header title={this.state.title}></Header>
        <Button type="primary" onClick={this.showModal}>
          添加
        </Button>
        <ul>
          {groupList.length &&
            groupList.map((gourp) => {
              return (
                <li className={style.cards} key={gourp.id}>
                  {gourp.title}
                </li>
              );
            })}
        </ul>
        <Modal
          title="添加分组"
          visible={this.state.visible}
          onOk={() => this.handleOk()}
        >
          <AddFrom ref={this.formRef}></AddFrom>
        </Modal>
      </div>
    );
  }
}

export default Cart;
